<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
            text-align: center;
        }
        input{
            width: 85%;
            height: 40px;
            border-radius: 5px;
            margin-top:30px;
            text-align: left;
            outline: none;
            padding-left: 10px;
        }
        input[type=submit]{
            width: 100px;
            height: 40px;
            text-align: center;
            font-size: 25px;
            outline: none;
            border:none;
        }
        table{
            width: 90%;
            text-align: center;
            margin:auto;
            margin-top: 60px;
        }
        tr{
            width: 25%;
            height: 30px;
            font-size: 25px;
        }
        label{
            font-size: 25px;
            line-height: 30px;
        }
        button{
            width: 45%;
            height: 25px;
            margin:5px;
        }
        .box{
            width: 100%;
            height: 100%;
            text-align: center;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }
        .b1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="big">
    <label for="input">名字:</label>
    <input type="text" class="txt" value=""><br>
    <label for="input">电话:</label>
    <input type="tel" class="tel" value=""><br>
    <label for="input">邮箱:</label>
    <input type="email" class="ema" value=""><br>
    <input type="submit" value="保存" class="b1">
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <td id="na">名字</td>
                <td id="te">电话</td>
                <td id="em">邮箱</td>
                <td id="ad">删改</td>
            </tr>
        </thead>       
        <tbody>

        </tbody>
    </table>
    <div class="box">
            <label for="input">名字:</label>
            <input type="text" class="txt1" value=""><br>
            <label for="input">电话:</label>
            <input type="tel" class="tel1" value=""><br>
            <label for="input">邮箱:</label>
            <input type="email" class="eam1" value=""><br>
            <input type="submit" value="保存" class="editSave1111">
    </div>
</div>
</body>
<script>
    var btn = document.querySelector("input[type=submit]");

    var inps = document.querySelectorAll("input");
    var table = document.querySelector("table");
    
 
    btn.onclick = function(e){
        var tbo = document.querySelector("table tbody");
        e.preventDefault();
        var na = inps[0].value;
        var te = inps[1].value;
        var em = inps[2].value;
        var obj = {
            na:na,
            te:te,
            em:em
        }
        var all = localStorage.getItem('list')
        if(all){
            all = JSON.parse(all);
            all.push(obj);
            localStorage.setItem('list',JSON.stringify(all))
        }else{
            localStorage.setItem('list',JSON.stringify([obj]))
        }
        var str = `
        <tr>
            <td>${obj.na}</td>
            <td>${obj.te}</td>
            <td>${obj.em}</td>
             <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
        </tr>
        `
        tbo.innerHTML+=str;
        inps[0].value='';
        inps[1].value='';
        inps[2].value='';
    }
    rander();
    function rander(){
        var tbo = document.querySelector("table tbody");
        all = JSON.parse(localStorage.getItem('list'))
        console.log(all);
        if(all){
            all.forEach(element => {
                var str = `
                <tr>
                    <td>${element.na}</td>
                    <td>${element.te}</td>
                    <td>${element.em}</td>
                    <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
                </tr>
                `
                console.log(element);
                tbo.innerHTML +=str;
            });
        }
    }


    table.addEventListener('click',function(e){    
        var tbo = document.querySelector("table tbody");   
        var event = e || window.event;
        var target = event.target || event.srcElement;
        console.log(target);
        console.log(target.nodeName);
        console.log(target.className)
        if(target.className === 'delBtn'){
            var tr = e.target.parentNode.parentNode;
            console.log(tr.rowIndex);
            var index = tr.rowIndex - 1;
            console.log(tbo.rows);
            tr.remove();
            var all=localStorage.getItem('list')
            all=JSON.parse(all);            
            all.splice(index,1)
            localStorage.setItem('list',JSON.stringify(all))

        }
       
       
    })

    table.addEventListener('click',function(e){        
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.className === 'editBtn'){
            var box = document.querySelector('.box');
            box.style.display = 'block';
            var tr = target.parentNode.parentNode;
            var index = tr.rowIndex - 1;
            console.log(index);
            var all = localStorage.getItem('list');
            all = JSON.parse(all);
            var obj = all[index];
            console.log(obj);
            obj.index = index;
            sessionStorage.setItem('listEdit',JSON.stringify(obj));
        
            inps[4].value=obj.na;
            inps[5].value=obj.te;
            inps[6].value=obj.em;
        }
    })

    console.log('----'+inps[7])
    var eidtSave = document.querySelector('.editSave1111');
    console.log('----'+eidtSave)
    inps[7].onclick = function(e){
        var tbo = document.querySelector("table tbody");
        e.preventDefault();
        var all = localStorage.getItem('list');
        all = JSON.parse(all);
        var obj2 = sessionStorage.getItem('listEdit');
        obj2 = JSON.parse(obj2);
        console.log(all)
        console.log(obj2)
        var obj1 = {
            na:inps[4].value,
            te:inps[5].value,
            em:inps[6].value
        }
        console.log(obj1);
        all.splice(obj2.index,1,obj1);

        console.log(all);
        localStorage.setItem('list',JSON.stringify(all));
        console.log(tbo.rows[obj2.index]);
        
        var nodeOld = tbo.rows[obj2.index];
        var nodeNew = document.createElement('tr');
        var str = `
                <tr>
                    <td>${obj1.na}</td>
                    <td>${obj1.te}</td>
                    <td>${obj1.em}</td>
                    <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
                </tr>
                `;
        nodeNew.innerHTML = str;

        console.log(nodeNew);
        tbo.replaceChild(nodeNew,nodeOld);

      
        var box = document.querySelector('.box');
        box.style.display = 'none';
 
    }
   
   
</script>
</html>